import { loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
import { createProxy } from "./build/vite/proxy";
import { wrapperEnv } from "./build/utils";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import postcsspxtoviewport from "postcss-px-to-viewport";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

function pathResolve(dir) {
  return resolve(process.cwd(), ".", dir);
}

export default ({ command, mode }) => {
  const root = process.cwd();
  const env = loadEnv(mode, root);
  const viteEnv = wrapperEnv(env);
  const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_DROP_CONSOLE } = viteEnv;

  return {
    // base: process.env.NODE_ENV === "production" ? "./" : VITE_PUBLIC_PATH,
    base: "./", // 新增
    root,
    resolve: {
      alias: [
        {
          find: "@",
          replacement: pathResolve("src") + "/"
        }
      ],
<<<<<<< HEAD
      extensions: [".js", ".vue", ".ts", ".json", ".css", ".less", ".jsx"]
=======
      extensions: [
        ".js",
        ".vue",
        ".ts",
        ".json",
        ".css",
        ".less",
        ".jsx",
        ".png",
        ".svg",
      ],
>>>>>>> lz
    },
    css: {
      preprocessorOptions: {
        scss: {
          // 自定义的主题色
<<<<<<< HEAD
          additionalData: `@use "@/style/element/index.scss" as *;`
        }
      }
=======
          additionalData: `@use "@/style/element/index.scss" as *;`,
        },
      },
      // postcss: {
      //   plugins: [
      //     postcsspxtoviewport({
      //       unitToConvert: "px", // 要转化的单位
      //       viewportWidth: 1080, // UI设计稿的宽度
      //       unitPrecision: 6, // 转换后的精度，即小数点位数
      //       propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      //       viewportUnit: "vh", // 指定需要转换成的视窗单位，默认vw
      //       fontViewportUnit: "vh", // 指定字体需要转换成的视窗单位，默认vw
      //       selectorBlackList: ["ignore-"], // 指定不转换为视窗单位的类名，
      //       minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      //       mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
      //       replace: true, // 是否转换后直接更换属性值
      //       // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
      //       exclude: [],
      //       landscape: false, // 是否处理横屏情况
      //     }),
      //   ],
      // },
>>>>>>> lz
    },
    plugins: [
      vue({
        babel: {
          plugins: ["@babel/plugin-proposal-optional-chaining"]
        }
      }),
      AutoImport({
        resolvers: [ElementPlusResolver({ importStyle: "sass" })]
      }),
      Components({
<<<<<<< HEAD
        resolvers: [ElementPlusResolver({ importStyle: "sass" })]
      })
=======
        resolvers: [ElementPlusResolver({ importStyle: "sass" })],
      }),
      createSvgIconsPlugin({
        // config svg dir that can config multi
        iconDirs: [
          resolve(process.cwd(), "src/icons/common"),
          resolve(process.cwd(), "src/icons/nav-bar"),
        ],
        // appoint svg icon using mode
        symbolId: "icon-[dir]-[name]",
      }),
>>>>>>> lz
    ],
    // 打包
    build: {
      target: "es2015",
      outDir: "./dist",
      terserOptions: {
        compress: {
          keep_infinity: true,
          drop_console: VITE_DROP_CONSOLE
        }
      },
      brotliSize: false,
      chunkSizeWarningLimit: 2000
    },

    // 开发环境
    server: {
      host: true,
      port: VITE_PORT,
      proxy: createProxy(VITE_PROXY)
    }
  };
};
